<script setup lang="ts">
import { reactive } from 'vue';
import { contractList } from '@/api/contract';
import ContractList from '../ContractList/index.vue';
import VantPull from '@/components/VantPull/index.vue';

import { showToast } from 'vant';
import { myStore } from '@/store/my';

const store: any = myStore();
if (!store.userInfo.role) {
  await store.getUserInfo();
}

const tabs = [
  { type: 2, text: store.userInfo.role === 3 ? '待确认' : '待签约' },
  { type: 3, text: '履约中' },
  { type: 4, text: '已完成' },
  { type: 5, text: '已失效' },
];
const props = defineProps({
  type: { type: String },
});

// 企业端
if (store.userInfo.role === 3) tabs.unshift({ type: 1, text: '待发送' });
if (props.type === '0') tabs.unshift({ type: 0, text: '全部' });

const state = reactive({
  loading: false,
  finished: false,
  type: props.type || tabs[0].type,
  list: [],
  acitveIndex: 0,
});
const setTabList = (type: any) => {
  if (type === state.type) return;
  state.type = type;
  getContractList();
};
const getContractList = async () => {
  state.loading = true;
  const res: any = await contractList({
    is_contract_type: state.type,
    curr_identity: store.userInfo.role,
  });
  if (res) {
    state.list = res.records;
  } else {
    showToast(res.msg);
  }
  state.loading = false;
  state.finished = true;
  state.acitveIndex++;
};
getContractList();
</script>
<template>
  <div class="contract-tab">
    <span
      v-for="(item, index) in tabs"
      :class="Number(state.type) === item.type ? 'active' : ''"
      :key="index"
      @click="setTabList(item.type)"
      >{{ item.text }}<i></i
    ></span>
  </div>
  <VantPull v-model:loading="state.loading" @refresh="getContractList">
    <ContractList :contractList="state.list" />
    <div v-if="state.list.length === 0" class="no-data">暂无数据</div>
  </VantPull>

  <router-link v-if="store.userInfo.role === 3" to="/my/contract/add">
    <button class="wy-submit">新建合约</button>
  </router-link>
</template>

<style scoped>
.no-data {
  line-height: 100px;
  text-align: center;
}
.van-pull-refresh {
  height: calc(100vh - 46px - 5rem);
  overflow: auto;
}
.contract-tab {
  display: flex;
}
.contract-tab span {
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: 400;
  color: #666666;
  flex: 1;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  padding: 0.59rem 0;
  text-align: center;
  position: relative;
}
.contract-tab span.active {
  color: #ff9415;
}
.contract-tab span.active i {
  width: 1.63rem;
  height: 0.05rem;
  background: #ff9415;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -0.815rem;
}
</style>
